<template>
  <s-tabs :id="id" v-bind="attrs" class="dragItem" style="width: 100%;position: relative">
    <a-tab-pane
      v-for="(element, index) in fakeItems"
      :key="index + ''"
      :force-render="true"
      :tab="element.label"
    >
      <div :style="{ height: extendAttrs.height }">
        <s-scroll>
          <dynamic-drag-form
            :id="element.id"
            ref="dragContext"
            :item-choose="itemChoose"
            :drag-group-name="dragGroupName"
            :drag-class="dragClass"
            :check-class="checkClass"
            :form="form"
            :items="element.items"
            :select-id="selectId"
            :logic-control="logicControl"
            @select="
              (v) => {
                $emit('itemSelect', v)
              }
            "
            @remove="
              (v) => {
                $emit('itemRemove', v)
              }
            "
          />
        </s-scroll>
      </div>
    </a-tab-pane>
  </s-tabs>
</template>
<script>
import BaseDragItem from './BaseDragItem'
import { v4 } from 'uuid'
import { defineAsyncComponent } from 'vue'
export default {
  name: 'TabItem',
  emits: ['itemSelect', 'itemRemove'],
  components: {
    DynamicDragForm: defineAsyncComponent(() =>
      import('@/components/extends/dynamicForm/designer/dragForm/index.vue')
    )
  },
  extends: BaseDragItem,
  data() {
    return {
      fakeItems: this.children ? this.children : []
    }
  },
  watch: {
    extendAttrs: {
      handler: function (val, oldVal) {
        this.initByTabs(val.tabs)
      },
      deep: true
    }
  },
  created() {
    const fakeItems = []
    for (let i = 0; i < this.extendAttrs.tabs.length; i++) {
      fakeItems.push({ id: v4(), items: [], label: this.extendAttrs.tabs[i] })
      if (this.fakeItems.length > i) {
        fakeItems[i].items = this.fakeItems[i].items
      }
    }
    this.fakeItems = fakeItems
  },
  methods: {
    initByTabs(tabs) {
      const fakeItems = []
      for (let i = 0; i < tabs.length; i++) {
        fakeItems.push({ id: v4(), items: [], label: tabs[i] })
        if (this.fakeItems.length > i) {
          const id = this.fakeItems[i].id
          const items = []
          this.getRef(id).getData(items, () => {
            return false
          })
          fakeItems[i].items = items
        }
      }
      this.fakeItems = fakeItems
    },
    buildHtml(disabled, space, filter, modelName) {
      let html = space + '<s-tabs\r\n'
      html = html + this.buildHtmlAttr(disabled, this.attrs, space + '  ', null, modelName)
      html = html + space + '  style="width: 100%"\r\n'
      html = html + space + '  default-active-key="0"\r\n'
      html = html + space + '>\r\n'
      for (let i = 0; i < this.fakeItems.length; i++) {
        html = html + space + '    <a-tab-pane\r\n'
        html = html + space + '      key="' + i + '"\r\n'
        html = html + space + '      tab="' + this.fakeItems[i].label + '">\r\n'
        html =
          html +
          space +
          '        <s-scroll' +
          ' style="height:' +
          this.extendAttrs.height +
          '">\r\n'
        html = html + space + '          <' + 'a-row>\r\n'
        html =
          html +
          this.getRef(this.fakeItems[i].id).buildHtml(disabled, space + '              ', filter)
        html = html + space + '          </' + 'a-row>\r\n'
        html = html + space + '        </' + 's-scroll>\r\n'
        html = html + space + '    </' + 'a-tab-pane>\r\n'
      }
      html = html + space + '</s-tabs>'
      return html
    },
    getRef(id) {
      for (let i = 0; i < this.fakeItems.length; i++) {
        const item = this.$refs.dragContext[i]
        if (item.$attrs.id == id) {
          return item
        }
      }
    },
    findKeyedItems(array) {
      for (let i = 0; i < this.fakeItems.length; i++) {
        this.getRef(this.fakeItems[i].id).findKeyedItems(array)
      }
    },
    findItemById(id) {
      let item
      for (let i = 0; i < this.fakeItems.length; i++) {
        item = this.getRef(this.fakeItems[i].id).findItemById(id)
        if (item) {
          return item
        }
      }
      return item
    },
    findItemByKey(key) {
      let item
      for (let i = 0; i < this.fakeItems.length; i++) {
        item = this.getRef(this.fakeItems[i].id).findItemByKey(key)
        if (item) {
          return item
        }
      }
      return item
    },
    removeItemById(id) {
      for (let i = 0; i < this.fakeItems.length; i++) {
        const flag = this.getRef(this.fakeItems[i].id).removeItemById(id)
        if (flag) {
          return flag
        }
      }
      return false
    },
    getData(array, filter) {
      const item = {
        id: this.id,
        type: this.type,
        attrs: this.attrs,
        extendAttrs: this.extendAttrs,
        properties: this.properties,
        children: []
      }
      for (let i = 0; i < this.fakeItems.length; i++) {
        item.children.push({ label: this.fakeItems[i].label, id: this.fakeItems[i].id, items: [] })
        this.getRef(this.fakeItems[i].id).getData(item.children[i].items, filter)
      }
      array.push(item)
    },
    findQueryableItemHtml(obj, space) {
      for (let i = 0; i < this.fakeItems.length; i++) {
        this.getRef(this.fakeItems[i].id).findQueryableItemHtml(obj, space)
      }
      return obj
    }
  }
}
</script>
